<template>
	<div class="search">
        <nav-bar :back="backChange">千影电影</nav-bar>
		<div class="search-header">
			<div class="input-wrapper">
				<img src="../assets/img/search1.png" class="img search-icon">
				<input type="text" class="search-input" placeholder="搜电影" v-model="keywords" @keyup="inputing"
					@keydown.enter="searching" />
			</div>
			<router-link class="cancel" to="/" tag="div">取消</router-link>
		</div>
		<component :is="cname" :keywords="keywords" :wordHistory="wordHistory" @delhot="delhotword"
			@changekeyword="changeKeyword">
		</component>
	</div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import SearchHistory from '@/components/SearchHistory.vue'
import SearchRuggest from '@/components/SearchRuggest.vue'
import _ from 'lodash'
export default {
    data() {
        return {
            backChange:true,
            cname: "SearchHistory",
            keywords: '',
            wordHistory: []
        }
    },
    components: {
        SearchHistory,
        SearchRuggest,
        NavBar,
    },
    mounted() {
        if (JSON.parse(localStorage.getItem("searchhistory"))) {
            this.wordHistory = JSON.parse(localStorage.getItem("searchhistory"));
        }
    },
    methods: {
        inputing: _.debounce(function() {
            if (this.keywords.length < 1) {
                this.cname = "SearchHistory"
            } else {
                this.cname = "SearchRuggest"
            }
        }, 500),

        searching(event) {
            this.cname = "SearchRuggest";
            this.setHistory();
            event.target.blur();
        },

        setHistory() {
            if (!this.wordHistory.includes(this.keywords)) {
                this.wordHistory.unshift(this.keywords);
                localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
            } else {
                let i = this.wordHistory.indexOf(this.keywords);
                this.wordHistory.splice(i, 1);
                this.wordHistory.unshift(this.keywords);
                localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
            }
        },

        delhotword() {
            localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
        },

        changeKeyword(keyword) {
            this.keywords = keyword;
            this.setHistory();
            this.cname = "SearchRuggest"
        },
    }
}
</script>

<style scoped lang="less">
	.search {
		// margin-top: 96px;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.search-header {
		display: flex;
		align-items: center;
		padding: 8px 0 8px 10px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #e5e5e5;
		position: relative;
		z-index: 1;
        margin-top: 50px;

		.input-wrapper {
			padding: 0 10px;
			border: 1px solid #e6e6e6;
			border-radius: 5px;
			background-color: #fff;
			flex-grow: 1;
		}

		.search-icon {
			width: 15px;
			height: 15px;
			margin-right: 6px;
			float: left;
			position: relative;
			top: 6px;
			background: none;
		}

		.search-input {
			flex: 1;
			border: none;
			font-size: 13px;
			color: #333;
			line-height: 20px;
			padding: 4px 0;
			width: calc(100% - 40px);
		}

		.cancel {
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			font-size: 16px;
			color: #f03d37;
		}
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/search1.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
